<template>
  <div>
    <!--
     :data:里面的值 就是我们列表返回的数据
      在template中 我们只能获取到data()函数中的数据
    -->
    <el-table
      :data="tableData"
      :row-class-name="tableRowClassName"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>

    </el-table>

    <!-- 分页用 设置数据条数 起始页 当前页 监听切换页面 -->
    <el-pagination
      align="left"
      background
      layout="prev, pager, next"
      :total="totals"
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="changePage">
    </el-pagination>



  </div>
</template>
<script>

    export default {
        data () {
            return {
                totals:0,
                currentPage:1,
                pageSize:5,
                tableData: []
            }
        },methods:{
            getList(){
                this.$http.post("/user/list",{"currentPage":this.currentPage,"pageSize":this.pageSize})
                    .then(result=>{
                        this.totals = result.data.totals;
                        this.tableData = result.data.data;
                    })
            },
            changePage(curr){
                this.currentPage = curr;
                this.getList();
            }

        },
        //首次需要执行钩子函数 调用列表展示方法
        mounted() {
            this.getList();
        }
        // ,
        //
        // methods: {
        //     getUserList(){
        //         // 调用后端接口 获取用户数据
        //         let para = {"currentPage":this.currentPage,"pageSize":this.pageSize}
        //         this.$http.post("/user/list",para)
        //             .then(result=>{
        //                 // 调用后端 后端返回的数据就在这里
        //                 this.tableData = result.data.data;
        //                 this.totals = result.data.totals;
        //             })
        //             .catch(result=>{
        //                 alert(result)
        //                 alert("网络不通！")
        //             })
        //     },
        //     gotoPage(curr) {
        //         this.currentPage = curr;
        //         this.getUserList();
        //     },
        //     tableRowClassName({row, rowIndex}) {
        //         if (rowIndex === 0) {
        //             return 'warning-row';
        //         } else if (rowIndex === 2) {
        //             return 'success-row';
        //         }else if (rowIndex === 4){
        //             return 'succes-row';
        //         }
        //         return '';
        //     }
        // },
        // // 想获取列表的第一页数据 就需要走钩子
        // mounted() {
        //     this.getUserList();
        // }
    }
</script>


<style>
  .el-table .warning-row {
    background: #1031cd;
  }
  .el-table .succes-row {
    background: #42b983;
  }

  .el-table .success-row {
    background: #e52074;
  }
</style>
